<template>
	<view class="tabs-item" :style="componentStyle" @click="handleItemClicked">
		{{label}}
	</view>
</template>

<script setup>
	import {inject,computed} from "vue"
	import {LUCKY_TABS_SYMBOL} from '@/common/constant.js'
	
	const props = defineProps({
		id:{
			type:String,
			required:true
		},
		label:String
	})
	
	const providedData = inject(LUCKY_TABS_SYMBOL)
	// todo：我在这里使用了解构的语法获取currentId，但是响应式并没有丢失
	const {activeColor,labelColor,labelActiveColor,currentId,height
	} = providedData
	
	const active = computed(() => {
		return props.id === currentId.value
	})
	const componentStyle = computed(() => ({
		backgroundColor:active.value ? activeColor : '',
		color:active.value ? labelActiveColor : labelColor,
		height:height + 'rpx',
		borderRadius:height / 2 + 'rpx'
	}))
	
	function handleItemClicked(){
		currentId.value = props.id
	}
</script>

<style lang="less" scoped>
	.tabs-item {
		display:flex;
		justify-content:center;
		align-items:center;
		padding:0 15rpx;
		font-size:25rpx;
		font-weight:bold;
	}
	.active {
		
	}
</style>